<template>
  <div class="a-map-select">
    <a-drawer
      title="地图上的位置"
      :closable="true"
      :destroyOnClose="true"
      width="100%"
      height="100%"
      @close="visible = false"
      :zIndex="10001"
      :visible="visible"
    >
      <div class="map-wrapper">
        <div class="map-container" id="container"></div>
      </div>
    </a-drawer>
  </div>
</template>

<script>
export default {
  name: 'Index',
  data() {
    return {
      visible: false,
    }
  },
  mounted() {},
  methods: {
    show(record) {
      this.visible = true
      setTimeout(() => {
        this.init(record.houseLat, record.houseLng)
        // this.init(32.832803, 109.368639)
      }, 500)
    },
    init(lat, lng) {
      this.map = new TMap.Map(document.getElementById('container'), {
        center: new TMap.LatLng(lat, lng), // 西安
        // center: new TMap.LatLng(32.832803, 109.368639), // 浔阳
        // center: new TMap.LatLng(40.040452, 116.273486), // 北京
        zoom: 19,
        minZoom: 6,
        maxZoom: 20,
        viewMode: '3D',
        pitch: 45,
        doubleClickZoom: false,
        showControl: false,
        mapStyleId: 'style1',
        baseMap: [
          { type: 'vector' }, //设置矢量底图
          {
            type: 'building3d',
            features: ['base'], //路况图类型，目前支持路况线网
            opacity: 0.3, //路况线网图的透明度
          },
        ],
      })

      new TMap.MultiMarker({
        map: this.map,
        styles: {
          marker: new TMap.MarkerStyle({
            width: 20,
            height: 30,
            anchor: { x: 10, y: 30 },
          }),
        },
        geometries: [
          {
            position: new TMap.LatLng(lat, lng),
            id: 'marker',
          },
        ],
      })
    },
  },
}
</script>

<style lang="less">
.map-container {
  width: 100%;
  height: 100%;
}
</style>
